<template>
  <div class="app-container">
    <el-tabs type="border-card" @tab-click="tabClick" v-model="type">
      <el-tab-pane name="follow" label="关注时回复">
        <el-button
          size="small"
          type="primary"
          icon="Plus"
          v-if="tableData.length < 3"
          @click="handleFollowAdd(1)"
          v-hasPermi="['member:follow:add']"
          >添加</el-button
        >
        <!-- v-hasPermi="['api:mpManage:addFollow']" -->
        <h3></h3>
        <x-table
          v-loading="tableLoading"
          :tableData="tableData"
          :propList="propList1"
        >
          <template #msg_type="{ row }">
            <span> {{ getMsgType(row.msg_type) }}</span>
          </template>
          <template #op="{ row }">
            <el-button
              style="margin-right: 10px"
              size="small"
              type="primary"
              icon="Edit"
              @click="edit(row)"
              v-hasPermi="['member:follow:change']"
              >编辑</el-button
            >
            <!-- v-hasPermi="['api:mpManage:changeFollow']" -->
            <el-popconfirm @confirm="del(row)" title="确定要删除吗?">
              <template #reference>
                <el-button
                  size="small"
                  type="danger"
                  icon="Delete"
                  v-hasPermi="['member:follow:del']"
                  >删除</el-button
                >
                <!-- v-hasPermi="['api:mpManage:delFollow']" -->
              </template>
            </el-popconfirm>
          </template>
        </x-table>
      </el-tab-pane>
      <el-tab-pane name="scan" label="扫码回复">
        <el-button
          size="small"
          type="primary"
          icon="Plus"
          v-if="!tableData.length"
          @click="handleScanAdd(2)"
          v-hasPermi="['member:scan:add']"
          >添加</el-button
        >
        <!-- v-hasPermi="['api:mpManage:addFollow']" -->
        <h3></h3>
        <x-table
          v-loading="tableLoading"
          :tableData="tableData"
          :propList="propList1"
        >
          <template #msg_type="{ row }">
            <span> {{ getMsgType(row.msg_type) }}</span>
          </template>
          <template #op="{ row }">
            <el-button
              style="margin-right: 10px"
              size="small"
              type="primary"
              icon="Edit"
              @click="edit(row)"
              v-hasPermi="['member:scan:change']"
              >编辑</el-button
            >
            <!-- v-hasPermi="['api:mpManage:changeFollow']" -->
            <el-popconfirm @confirm="del(row)" title="确定要删除吗?">
              <template #reference>
                <el-button
                  size="small"
                  type="danger"
                  icon="Delete"
                  v-hasPermi="['member:scan:del']"
                  >删除</el-button
                >
                <!-- v-hasPermi="['api:mpManage:delFollow']" -->
              </template>
            </el-popconfirm>
          </template>
        </x-table>
      </el-tab-pane>
      <el-tab-pane name="autoreply" label="消息回复">
        <el-button
          size="small"
          type="primary"
          icon="Plus"
          @click="handleAutoReplyAdd"
          v-hasPermi="['member:autoreply:add']"
          >添加</el-button
        >
        <!-- v-hasPermi="['api:mpManage:addAutoreply']" -->
        <h3></h3>
        <x-table
          v-loading="tableLoading"
          :tableData="tableData"
          :propList="propList2"
        >
          <template #msg_type="{ row }">
            <span> {{ getMsgType(row.msg_type) }}</span>
            <!-- <span> {{ row.msg_type | msgTypeFilter }}</span> -->
          </template>
          <template #req_msg_type="{ row }">
            <span> {{ getReqMsgType(row.req_msg_type) }}</span>
          </template>
          <template #op="{ row }">
            <el-button
              style="margin-right: 15px"
              size="small"
              type="primary"
              icon="Edit"
              @click="edit(row)"
              v-hasPermi="['member:autoreply:change']"
              >编辑</el-button
            >
            <!-- v-hasPermi="['api:mpManage:changeAutoreply']" -->
            <el-popconfirm @confirm="del(row)" title="确定要删除吗?">
              <template #reference>
                <el-button
                  size="small"
                  type="danger"
                  icon="Delete"
                  v-hasPermi="['member:autoreply:del']"
                  >删除</el-button
                >
                <!-- v-hasPermi="['api:mpManage:delAutoreply']" -->
              </template>
            </el-popconfirm>
          </template>
        </x-table>
      </el-tab-pane>
      <el-tab-pane name="keywords" label="关键词回复">
        <el-button
          size="small"
          type="primary"
          icon="Plus"
          @click="handleKeywordsAdd"
          v-hasPermi="['member:keywords:add']"
          >添加</el-button
        >
        <!-- v-hasPermi="['api:mpManage:addKeyword']" -->
        <h3></h3>
        <x-table
          v-loading="tableLoading"
          :tableData="keywordsInfo.items"
          :propList="propList3"
        >
          <template #state="{ row }">
            <el-tag v-if="row.state == 1" type="success" effect="dark">
              启用
            </el-tag>
            <el-tag v-else type="danger" effect="dark"> 禁用 </el-tag>
          </template>
          <template #msg_type="{ row }">
            <span> {{ getMsgType(row.msg_type) }}</span>
          </template>
          <template #match_mode="{ row }">
            <span> {{ getMatchMode(row.match_mode) }}</span>
          </template>
          <template #op="{ row }">
            <el-button
              v-if="row.msg_type != 'poster'"
              style="margin-right: 15px"
              size="small"
              type="primary"
              icon="Edit"
              @click="edit(row)"
              v-hasPermi="['member:keywords:change']"
              >编辑</el-button
            >
            <!-- v-hasPermi="['api:mpManage:changeKeyword']" -->
            <el-popconfirm
              v-if="row.msg_type != 'poster'"
              @confirm="del(row)"
              title="确定要删除吗?"
            >
              <template #reference>
                <el-button
                  size="small"
                  type="danger"
                  icon="Delete"
                  v-hasPermi="['member:keywords:del']"
                  >删除</el-button
                >
                <!-- v-hasPermi="['api:mpManage:delKeyword']" -->
              </template>
            </el-popconfirm>
          </template>
        </x-table>
        <pagination
          v-show="keywordsInfo.total > 0"
          :total="keywordsInfo.total || 0"
          v-model:page="searchInfo.page"
          v-model:limit="searchInfo.pageSize"
          @pagination="getInfo"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- :modal-append-to-body="false" -->
    <el-dialog :title="getTitle" v-model="followDialog" width="50%">
      <div>
        <el-form ref="baseInfo" :model="baseInfo">
          <el-form-item
            v-if="type == 'autoreply'"
            :label-width="labelWidth"
            :rules="[
              {
                required: true,
                message: '请选择消息请求类型',
                trigger: 'change',
              },
            ]"
            label="请求消息类型"
            prop="req_msg_type"
          >
            <el-select v-model="baseInfo.req_msg_type" placeholder="请选择">
              <el-option
                v-for="item in reqMsgTypeList"
                :key="item.value"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <template v-if="type == 'keywords'">
            <el-form-item
              :label-width="labelWidth"
              :rules="[
                {
                  required: true,
                  message: '请选择匹配类型',
                  trigger: 'change',
                },
              ]"
              label="匹配类型"
              prop="match_mode"
            >
              <el-select v-model="baseInfo.match_mode" placeholder="请选择">
                <el-option
                  v-for="item in matchModeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label-width="labelWidth"
              v-if="type == 'keywords'"
              :rules="[
                {
                  required: true,
                  message: '请输入关键字',
                  trigger: 'blur',
                },
              ]"
              label="关键字"
              prop="keywords"
            >
              <el-input
                style="width: 300px"
                placeholder="请输入关键字"
                v-model="baseInfo.keywords"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否启用" :label-width="labelWidth">
              <el-switch
                v-model="baseInfo.state"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </template>
        </el-form>
        <wx-reply
          v-if="baseInfo.msg_type != 'poster'"
          v-model:baseInfo="baseInfo"
          @selectMaterial="selectMaterial"
        ></wx-reply>
      </div>

      <template #footer>
        <el-button @click="followDialog = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import { tableOption1, tableOption2, tableOption3 } from "./config/index";
import { getList, changeFollow, addFollow, del } from "@/api/mpManage/mpFollow";
import {
  getAutoreplyList,
  changeAutoreply,
  addAutoreply,
  delAutoreply,
} from "@/api/mpManage/mpAutoreply";
import {
  changeKeyword,
  addKeyword,
  getKeywordsList,
  delKeyword,
} from "@/api/mpManage/mpKeywords";
import {
  changeScan,
  addScan,
  getScanList,
  delScan,
} from "@/api/mpManage/mpScan";

import WxReply from "@/cpns/WxReply";
export default {
  name: "mpmpReplyindex",
  components: {
    WxReply,
  },
  data() {
    return {
      eventType: 1, //时间类型 1关注回复 2 扫码回复
      type: "follow",
      baseInfo: {
        msg_type: "text",
        newsItem: {},
        img_url: "",
        state: 1,
      },
      followDialog: false,
      curForm: {},
      info: {},
      tableLoading: true,
      propList1: [
        {
          label: "ID",
          prop: "id",
        },
        {
          label: "回复消息类型",
          slotName: "msg_type",
        },
        {
          label: "操作",
          slotName: "op",
          fixed: "right",

          showOverflowTooltip: false,
        },
      ],
      propList2: [
        {
          label: "ID",
          prop: "id",
        },
        {
          label: "消息请求类型",
          slotName: "req_msg_type",
        },
        {
          label: "回复消息类型",
          slotName: "msg_type",
        },
        {
          label: "操作",
          slotName: "op",
          fixed: "right",

          showOverflowTooltip: false,
        },
      ],
      propList3: [
        {
          label: "关键字",
          prop: "keywords",
        },
        {
          label: "匹配类型",
          slotName: "match_mode",
        },
        {
          label: "回复消息类型",
          slotName: "msg_type",
        },
        {
          label: "状态",
          slotName: "state",
        },
        {
          label: "操作",
          slotName: "op",
          fixed: "right",
          showOverflowTooltip: false,
        },
      ],
      tableData: [],
      // tableData2: [],
      keywordsInfo: {},
      searchInfo: {
        page: 1,
        pageSize: 10,
      },
      reqMsgTypeList: [
        {
          label: "文本",
          value: "text",
        },
        {
          label: "图片",
          value: "image",
        },
        // {
        //   label: "图文",
        //   value: "news",
        // },
        {
          label: "视频",
          value: "video",
        },
        {
          label: "语音",
          value: "voice",
        },
        {
          label: "小视频",
          value: "shortvideo",
        },
        {
          label: "地理位置",
          value: "location",
        },
        {
          label: "链接消息",
          value: "link",
        },
      ],
      matchModeList: [
        {
          label: "精准匹配",
          value: 1,
        },
        {
          label: "包含匹配",
          value: 2,
        },
      ],
      labelWidth: "120px",
    };
  },
  computed: {
    getTitle() {
      const map = {
        follow: "关注时回复消息",
        scan: "扫码时回复消息",
        autoreply: "自动回复消息",
        keywords: "关键词回复",
      };
      return map[this.type];
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      this.tableLoading = true;
      try {
        if (this.type == "follow") {
          const { data } = await getList();
          console.log(data);
          if (data) {
            this.tableData = data;
          }
        }
        if (this.type == "scan") {
          const { data } = await getScanList();
          console.log(data);
          if (data) {
            this.tableData = data;
          }
        }
        console.log(this.type);
        if (this.type == "autoreply") {
          const { data } = await getAutoreplyList();
          this.tableData = data;
        }
        if (this.type == "keywords") {
          const params = { ...this.searchInfo };
          const { data } = await getKeywordsList(params);
          console.log(111, data);
          this.keywordsInfo = data;
        }
      } finally {
        this.tableLoading = false;
      }
    },
    getMsgType(type) {
      const msgTypeMap = {
        text: "文本",
        image: "图片",
        voice: "语音",
        video: "视频",
        music: "音乐",
        news: "图文",
        poster: "海报",
      };
      return msgTypeMap[type];
    },
    tabClick() {
      this.getInfo();
    },
    handleReqMsgDisable(reqMsgTypeList) {
      this.tableData.forEach((item) => {
        reqMsgTypeList.forEach((item2) => {
          // item2.disabled = false;
          if (item2.value == item.req_msg_type) {
            item2.disabled = true;
          } else {
            // item2.disabled = false;
          }
        });
      });
      console.log(reqMsgTypeList);
    },
    handleKeywordsAdd() {
      this.baseInfo = this.$options.data().baseInfo;
      this.followDialog = true;
      this.$nextTick(() => {
        this.$refs.baseInfo.clearValidate();
      });
    },
    handleAutoReplyAdd() {
      this.followDialog = true;
      this.baseInfo = this.$options.data().baseInfo;
      this.$nextTick(() => {
        this.$refs.baseInfo.clearValidate();
      });
      // 处理请求消息类型禁用
      this.handleReqMsgDisable(this.reqMsgTypeList);
    },
    handleFollowAdd(type) {
      this.baseInfo = this.$options.data().baseInfo;
      this.followDialog = true;
      // this.eventType = type
    },
    handleScanAdd(type) {
      this.baseInfo = this.$options.data().baseInfo;
      this.followDialog = true;
      // this.eventType = type
    },
    edit(row) {
      this.baseInfo = { ...row };
      if (this.baseInfo.newsItem) {
        this.baseInfo.newsItem = JSON.parse(this.baseInfo.newsItem);
      }
      console.log(this.baseInfo);
      this.followDialog = true;
      if (this.type == "autoreply") {
        // 处理请求消息类型禁用
        this.handleReqMsgDisable(this.reqMsgTypeList);
        //把当前的启用
        this.reqMsgTypeList.forEach((item) => {
          if (item.value == row.req_msg_type) {
            item.disabled = false;
          }
        });
      }
    },
    async del(item) {
      if (this.type == "scan") {
        await delScan(item.id);
        this.$message.success("删除成功");
        this.getInfo();
      }
      if (this.type == "follow") {
        await del(item.id);
        this.$message.success("删除成功");
        this.getInfo();
      }
      if (this.type == "autoreply") {
        await delAutoreply(item.id);
        this.$message.success("删除成功");
        this.getInfo();
      }
      if (this.type == "keywords") {
        await delKeyword(item.id);
        this.$message.success("删除成功");
        this.getInfo();
      }
    },
    getMatchMode(match_mode) {
      const active = this.matchModeList.find(
        (item) => item.value == match_mode
      );
      if (active) {
        return active.label;
      } else {
        return "未找到打匹配项";
      }
    },
    getReqMsgType(type) {
      const active = this.reqMsgTypeList.find((item) => item.value == type);
      if (active) {
        return active.label;
      } else {
        return "未找到打匹配项";
      }
    },
    refreshChange() {
      console.log("refreshChange");
    },
    selectMaterial(item, index) {
      console.log(item, index);
    },
    async handleAjaxSubmit(params) {
      console.log(111, params);
      if (this.type == "scan") {
        if (params.id) {
          await changeScan(params);
        } else {
          await addScan(params);
        }
      }
      if (this.type == "follow") {
        if (params.id) {
          await changeFollow(params);
        } else {
          await addFollow(params);
        }
      }
      if (this.type == "autoreply") {
        if (params.id) {
          await changeAutoreply(params);
        } else {
          await addAutoreply(params);
        }
      }
      if (this.type == "keywords") {
        if (params.id) {
          await changeKeyword(params);
        } else {
          await addKeyword(params);
        }
      }
      this.$message.success("操作成功");
      this.followDialog = false;
      this.getInfo();
    },
    handleSubmit() {
      const msg_type = this.baseInfo.msg_type;
      const params = { ...this.baseInfo };
      if (params.newsItem) {
        params.newsItem = JSON.stringify(params.newsItem);
      }
      console.log(222, msg_type);
      switch (msg_type) {
        case "text":
          if (!this.baseInfo.content) {
            this.$message.error("请输入内容");
            return false;
          }
          this.handleAjaxSubmit(params);
          break;
        case "image":
          if (!this.baseInfo.media_id) {
            this.$message.error("请选择图片");
            return false;
          }
          this.handleAjaxSubmit(params);
          break;
        case "news":
          if (!this.baseInfo.newsItem.url) {
            this.$message.error("请选择图文");
            return false;
          }
          this.handleAjaxSubmit(params);
          break;
        // case "poster":
        //   this.handleAjaxSubmit(params);
        //   break;
        default:
          break;
      }
    },
    async submit() {
      // console.log(this.baseInfo);
      if (this.type == "follow") {
        this.handleSubmit();
        return false;
      }
      if (this.type == "scan") {
        this.handleSubmit();
        return false;
      }
      this.$refs.baseInfo.validate(async (valid) => {
        if (valid) {
          if (this.type == "autoreply") {
            this.handleSubmit();
          }
          if (this.type == "keywords") {
            console.log(this.baseInfo);
            this.handleSubmit();
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
